Skip to content

feat(brand): adopt the Mockifyr logo across the dashboard and repo - #178

Merged
omercelikdev merged 7 commits into
mainfrom
feat/brand-logo
Jul 21, 2026
Merged

feat(brand): adopt the Mockifyr logo across the dashboard and repo#178
omercelikdev merged 7 commits into
mainfrom
feat/brand-logo

Conversation

@omercelikdev

Copy link
Copy Markdown
Owner

Adds the brand asset set under brand/ and puts the mark where the placeholder M tile used to be — sidebar, favicon, README header.

What the assets are

Two chevrons facing each other — request out, response back — joined by a wing, with the eye as the single accent. A bird in flight read as a whole; the engine read as a diagram.

Three corrections to the supplied artwork

Centring. The artwork sat 5 units below the centre of its own 140x100 viewBox (top padding 23.5, bottom 13.5), so it rendered low in every square container — visibly in the 64px favicon and the 512px app icon, whose transforms had inherited the same offset. The mark now lives on a tight 0 0 125 63 viewBox where the ink, round caps included, touches all four edges. Consumers add their own padding and centring is exact by construction.

No file swapping. The dashboard does not load mark-black.svg / mark-white.svg and swap them on theme change. It inlines the mark as a component whose stroke is currentColor — one element, no flash, no second request.

Two brand tokens, not one. The eye has to contrast with the --primary tile it sits on, and that tile inverts between themes (near-black in light, near-white in dark). Hence --brand / --brand-on-primary.

Brand blue stays out of the UI ramp on purpose: the palette remains zinc-monochrome and the blue never competes with --info, which is a near-identical informational state colour.

Known limitation — the lockups

brand/lockup/*.svg set their wordmark as live SVG <text> in Sora. Without that font installed they silently fall back and render as something that is not the logo. They ship as editable sources with the caveat documented in brand/README.md; the product composes its lockup from the mark plus real text (selectable, translatable, theme-aware).

Licensing

NOTICE now records that Apache-2.0 grants no trademark licence for the name or these files (LICENSE §6).

Verification

Driven in the dashboard on both themes and both sidebar states:

  • mark centres exactly in the 32px tile — 5px horizontal, 10.45px vertical padding on each side
  • eye resolves to #5a8dff on the dark tile, #0a4ecf on the light one
  • favicon serves as image/svg+xml
  • console clean, pnpm lint and pnpm build clean

No PNG raster set yet (GitHub social preview, apple-touch-icon) — that needs an SVG→PNG step and is left for a follow-up.

🤖 Generated with Claude Code

omercelikdev and others added 7 commits July 21, 2026 10:01
Adds the brand asset set under brand/ and puts the mark where the placeholder
"M" tile used to be, in the sidebar, the favicon and the README header.

Three corrections to the supplied artwork:

- The artwork sat 5 units below the centre of its own 140x100 viewBox (top
  padding 23.5, bottom 13.5), so it rendered low in every square container —
  visibly in the 64px favicon and the 512px app icon, whose transforms had
  inherited the same offset. The mark is now on a tight 0 0 125 63 viewBox
  where the ink, round caps included, touches all four edges; consumers add
  their own padding and centring is exact by construction.
- The dashboard does not load the black/white files and swap them on theme
  change. It inlines the mark as a component whose stroke is currentColor, so
  one element follows the theme with no flash and no second request.
- The eye needs to contrast with the --primary tile it sits on, and that tile
  inverts between themes. Hence the --brand / --brand-on-primary pair rather
  than a single brand colour.

Brand blue stays out of the UI ramp on purpose: the palette remains zinc
monochrome and the blue never competes with --info, which is the near-identical
informational state colour.

The lockup SVGs set their wordmark as live <text> in Sora, which silently falls
back to another font on machines without it. They ship as editable sources with
that documented; the product composes its lockup from the mark plus real text.

NOTICE now records that Apache-2.0 grants no trademark licence for the name or
these files.

Verified in the dashboard on both themes and in both sidebar states: the mark
centres exactly in the 32px tile (5px horizontal, 10.45px vertical padding),
the eye resolves to #5a8dff on the dark tile and #0a4ecf on the light one, the
favicon serves as image/svg+xml, and the console is clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The mark was 22px wide inside a filled --primary tile, which read as a dark
badge with something small and indistinct in it — at that size neither the
silhouette nor the eye resolved.

It now sits directly on the sidebar surface and inverts with the theme:
near-black on the light background, near-white on the dark one. Losing the
tile's padding lets it grow to 40px expanded and 36px collapsed, roughly
double, so the chevrons separate and the eye is a dot rather than a smudge.
The filled tile stays the favicon's job, where an icon has to hold its own
against browser chrome it does not control.

With no tile behind it the eye contrasts with the page, not with --primary,
so --brand alone covers it and --brand-on-primary is gone.

Verified in both themes: stroke resolves to #18181b on light and #f4f4f5 on
dark, the eye to #0a4ecf and #5a8dff, and the mark renders 40x20.16 in the
expanded header.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
At 40px the mark read as a lump. The cause was proportion, not resolution:
stroke-width 13 on a 125-wide drawing left the counters nearly closed, and
the body notch was a 19-unit segment carrying a 13-unit stroke — 67% of its
own length, so it rendered as a blob welding the three shapes into one mass.

Stroke drops to 10 and the chevron apexes move inward (46.5/78.5 → 42/83),
widening each apex from 64° to 71° and stretching the body notch to ~25
units. The three shapes now separate and the eye reads as a dot rather than
part of the mass. The tight viewBox is unchanged, so every transform in the
favicon, app icons and lockups stays valid without recomputation.

Header size goes 40px → 50px. Every stroke in the mark is diagonal, so its
edges antialias at any size — that softness is inherent to the geometry, not
a rasterisation bug, and the only real remedy is more pixels. At 50px the
10-unit stroke also lands on exactly 4 device-independent pixels.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
In the collapsed rail the mark was 36x18 against 18x18 nav icons: equal in
height but twice as wide, so it carried far more visual mass than the row it
sits above and read as a banner rather than the first item in the rail.

It drops to 28x14.1. Bounding area now lands near the icons' (395 vs 324)
instead of double it, and the rail reads as one column. The expanded header
is untouched at 50px, where the mark has two lines of type to balance and
the extra presence is wanted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The header mark goes 50px → 40px (20.2px tall). 50px was chosen to buy
crispness, but the mark's edges are diagonal and antialias at any size, so
the extra width bought presence rather than sharpness — and outweighed the
two lines of type it sits beside. 40px balances that block.

The favicon drops the brand-blue tile for ink on white. A tab strip is a
dense row of other people's icons and a saturated blue tile competes there;
ink on white reads as the mark rather than as a colour, while the tile still
keeps the mark legible against dark browser chrome. The eye stays brand blue
— it is the accent everywhere else in the set, and dropping it would make
the favicon the only monochrome member.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The tab icon was the master mark scaled down, which is the wrong operation
for 16px. It filled 64% of the tile and its stroke landed on 0.84px — under
one pixel, so it rendered as grey haze next to tab neighbours that are bold
shapes filling their whole box, and the white tile gave it nothing to sit
against on an active (white) tab.

The favicon now has its own optical size: same skeleton, stroke 10 → 13 and
fill 64% → 91% of the tile, which puts the line on ~1.47px and the eye on
~1.9px at tab scale. Stroke stays under half the body notch's length, so the
three shapes still separate rather than welding into a lump.

This one file deliberately diverges from the master geometry. Scaling a line
drawing down past a certain point stops preserving it — below roughly 24px
the stroke has to be redrawn, not resized.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The white tile only ever looked right on the active tab. Everywhere else the
tab strip is tinted, so the icon read as a white square with something inside
it rather than as a mark.

Dropping the tile also buys room: with nothing to sit inside, the mark fills
94% of the box instead of 64% and the stroke goes 13 → 14, putting the line
on ~1.6px at tab scale, up from 1.47px.

With no tile the ink has to carry itself against whatever is behind it, so
the file switches on prefers-color-scheme — #111111 on light browser chrome,
#ffffff on dark — instead of assuming a light one and disappearing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@omercelikdev
omercelikdev merged commit 2523d7a into main Jul 21, 2026
3 checks passed
@omercelikdev
omercelikdev deleted the feat/brand-logo branch July 21, 2026 11:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant